<template>
	<div class="product-list">
		<div v-for="(item, index) in productList" :key="index" @click="onDetail(item.id)">
			<van-card
				:num="item.sold_count"
				:tag="item.sold_count > 1000 ? '新品' : ''"
				:price="item.price"
				:desc="item.spec"
				:title="item.title"
				:thumb="`${APIDomainName}${item.pic}`"
			/>
		</div>
	</div>
</template>

<script>
//1.导入封装后的接口
import { getProductListAPI } from '@/api/product.js';
export default {
	data() {
		return {
			productList: []
		};
	},
	//在生命周期函数中调用API接口从后端取业务数据
	created() {
		//使用封装的方法
		getProductListAPI().then(result => {
			// console.log(result);
			this.productList = result.data;
		});
	},
	methods: {
		onDetail(id) {
			// this.$router.push({ path: '/product/detail', query: { id: id } });
			this.$router.push({ name: 'productDetail', params: { id } });
		}
	}
};
</script>

<style scoped>
.product-list {
	background-color: #f9f9f9;
}
</style>
